<template>
    <div>
        <div class="dvs">
            <h3>发表评论</h3>
        </div>
        
        <div class="dvq"></div>
        <hr>
        <textarea placeholder="请输入您想要评论的内容" v-model="msg2"></textarea>
        <mt-button type="primary" size="large" class="btn-pinglun" @click="postmsg">发表评论</mt-button>
        <div v-for="item in list" :key="item.id"> 
            <div class="dv1">
                <span>2020年6月11日10:50:48</span>
                <div class="dv2">{{item}}</div>
            </div>
        </div>

        <div class="dv1">
                <span>2020年6月11日10:50:48</span>
                <div class="dv2">{{msg}}</div>
        </div>
        <div class="nowtime">{{nowtime}}</div>
        <mt-button type="danger" size="large"  plain class="btn-more" @click="getmore">加载更多</mt-button>
    </div>
</template>
<script>
export default {
    data(){
        return{
            msg:"",
            msg2:"",
            list:[],
            nowtime:""
        }
    },
    created(){
        this.getmsg();
        this.times();
    },
    methods:{
        getmsg(){
            this.$http.get("https://api.oioweb.cn/api/yiyan.php").then(result=>{
                console.log("获取评论消息成功");
                console.log(result.body);
                this.msg=result.body
                // this.list.push(this.msg=result.body); 
            });
        },
        getmore(){
            this.getmsg();
        },
        postmsg(){
            // this.msg+=this.msg2;
            // this.getmsg();
            this.list.unshift(this.msg2);
            this.msg2="";
        },
        times(){
            this.time=new Date();
        }
    }
    
}
</script>
<style scoped>
/* .dvs{
    float: left;
}
.dvq{
    width: 100%;
    height: 2px;
    background-color: #ccc;
    float: left;
    margin-bottom: 10px;
} */
.dv1{
    background-color: #ccc;
    margin-top: 8px;
}
.dv2{
    margin-top: 8px;
    padding-left: 10px;
    background-color: #fff;
}
.dv1 span{
    display: inline-block;
    margin-top: 5px;
}
.btn-more{
    margin-top:10px;
}
.btn-pinglun{
    margin-bottom:10px;
}
.nowtime{
    background-color: #ccc;
    margin-top: 8px;
}
</style>